<template>
	<view class="container column">
		<view class="topBox">
			<!-- 搜索 -->
			<view class="searchBox center transition">
<!--				<view class="search row">-->
<!--					<uni-icons type="search" size="18" color="#707070"></uni-icons>-->
<!--					<input class="uni-input" confirm-type="search" placeholder-style="color:#707070;" placeholder="输入小区名或地址" readonly @click="handleSearch" />-->
<!--					<view class="icon">-->
<!--						<image class="img" :src="$imgurl + '/icon/search_addr.png'" mode="" />-->
<!--					</view>-->
<!--				</view>-->
				<!-- <view class="message" @click="goMessage">
					<image class="img" :src="$imgUrl + '/index/message.png'" mode=""></image>
				</view> -->
			</view>
			<!-- banner -->
			<swiper :indicator-dots="true" :autoplay="true" indicator-color="rgb(255,255,255,0.4)"
				indicator-active-color="#FD9618" class="banner">
				<swiper-item v-for="(item, i) in bannerList" :key="i">
					<navigator :url="item.link" open-type="navigate" v-if="item.link">
						<image :src="$filters.oosImgZip(item.pagePath)" class="img" mode="aspectFill" />
					</navigator>
					<image :src="$filters.oosImgZip(item.pagePath)" class="img" v-else />
				</swiper-item>
			</swiper>
		</view>
		<!-- nav -->
		<view class="navBox" :class="navList.length>8?'twoLines':''">
			<u-scroll-list indicatorActiveColor="#FD9618" :indicator="navList.length>8?true:false">
				<view v-for="(item, index) in navList" :key="index" class="nav" @click="goTo(item)">
					<view class="icon ">
						<img class="img" :src="$filters.oosImgZip(item.link)" mode="" />
					</view>
					<view class="text">{{ item.name }}</view>
				</view>
			</u-scroll-list>
		</view>
		<!-- 通勤找房 -->
		<!-- <view class="tqBox" @click="goTq">
			<view class="tit">通勤找房</view>
			<view class="txt">设置公司地址和通勤方式，找房更方便></view>
		</view> -->
		<!-- 国企服务 -->
		<view class="introBox">
			<view class="introList introList1">
				<view class="tit">国企直租</view>
				<view class="txt">入住安心</view>
				<view class="pic">
					<image class="img" :src="$imgUrl + '/icon/intro1_new.png'" mode=""></image>
				</view>
			</view>
			<view class="introList introList2">
				<view class="tit">管家服务</view>
				<view class="txt">专业贴心</view>
				<view class="pic">
					<image class="img" :src="$imgUrl + '/icon/intro2_new.png'" mode=""></image>
				</view>
			</view>
			<view class="introList introList3">
				<view class="tit">流程规范</view>
				<view class="txt">托管放心</view>
				<view class="pic">
					<image class="img" :src="$imgUrl + '/icon/intro3_new.png'" mode=""></image>
				</view>
			</view>
			<view class="introList introList4">
				<view class="tit">社群活动</view>
				<view class="txt">享住开心</view>
				<view class="pic">
					<image class="img" :src="$imgUrl + '/icon/intro4_new.png'" mode=""></image>
				</view>
			</view>
		</view>
		<view class="mainBox column">
			<!-- <view class="onlineBox row" v-if="onlineInfo">
				<view class="onlineIcon">
					<image class="img" :src="onlineInfo.phonePic" mode=""></image>
				</view>
				<view class="logo">
					<image class="img" :src="onlineInfo.logo" mode=""></image>
				</view>
				<view class="mess">
					<view class="time">{{onlineInfo.content}}</view>
					<view class="phone">{{ onlineInfo.phone }}</view>
				</view>
				<u-button type="primary" class="btn" text="立即拨打" size="mini" @tap="$Foundation.call(onlineInfo.phone)"></u-button>
			</view> -->
			<!-- <view class="hotelBox">
				<view class="list">
					<view class="pic">
						<image class="img" :src="$imgUrl + '/index/hotel1.png'" mode=""></image>
					</view>
					<view class="mess">
						<view class="name">承悦拾光公寓酒店</view>
						<view class="price"><text class="fh">¥</text>78-288</view>
						<view class="addr">合肥市瑶海区明光路46号</view>
						<view class="icon row">
							<view class="icon-tj">
								<image class="img" :src="$imgUrl + '/index/hotel-tj.png'" mode=""></image>
							</view>
							<view class="icon-tel" @click="$Foundation.call('0551-62988698')">
								<image class="img" :src="$imgUrl + '/index/hotel-phone.png'" mode="">
								</image>
							</view>
						</view>
					</view>
				</view>
				<view class="list">
					<view class="pic">
						<image class="img" :src="$imgUrl + '/index/hotel2.png'" mode=""></image>
					</view>
					<view class="mess">
						<view class="name">承悦天鹅湖大酒店</view>
						<view class="price"><text class="fh">¥</text>278-548</view>
						<view class="addr">合肥市滨湖区武汉路230号</view>
						<view class="icon row">
							<view class="icon-tj">
								<image class="img" :src="$imgUrl + '/index/hotel-tj.png'" mode=""></image>
							</view>
							<view class="icon-tel" @click="$Foundation.call('0551-62838777')">
								<image class="img" :src="$imgUrl + '/index/hotel-phone.png'" mode="">
								</image>
							</view>
						</view>
					</view>
				</view>
			</view> -->
			<!-- <view class="loveBox" v-if="guessList&&guessList.length">
				<view class="loveTit">
					猜你喜欢
				</view>
				<view class="loveBottom">
					<u-scroll-list :indicator="false">
						<view class="loveItem" v-for="(item,i) in guessList" :key="'love'+i" @click="goDetail(item.apartmentId)">
							<image class="loveImage" :src="$filters.oosImgZip(item.picUrl)" mode="aspectFill"></image>
							<view class="house">
								<view class="mess">
									<view class="name">{{item.name}}</view>
									<view class="price">{{item.isConcentrated?'公寓':'小区'}}丨{{item.price}}元起</view>
								</view>
							</view>
						</view>
					</u-scroll-list>
				</view>
			</view> -->
			<view class="mainTit">推荐门店</view>
			<roomList :roomsList="roomsList" @getList="getRoomList"></roomList>
			<view class="contactUs" v-if="showContact">
				<view class="close">
					<uni-icons type="clear" size="20" color="#999" @click="closeContact"></uni-icons>
				</view>
				<image :src="$imgUrl + '/icon/contactUs.png'" class="img" @tap="$Foundation.call(onlineInfo.phone)"></image>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { indexConfig,showHome  } from '@/common/API/index'
import { getroomsList } from '@/common/API/room'
import roomList from '@/components/roomList/index.vue'
import { onLoad,onShow,onPageScroll,onPullDownRefresh } from "@dcloudio/uni-app"
const scrollTop = ref(0)
const bannerList = ref([])
const onlineInfo = ref({})
const roomsList = ref([])
const navList = ref([])
const guessList = ref([])
const showHomeConfig = ref(true)
const showContact = ref(true)
onShow(()=>{
	// 1:首页banner 2:服务电话 3:推荐位 4:房源推荐
	getBanner()
	getTel()
	getRecommend()
	getRoomList()
	// getGuessList()
})

onLoad((options)=> {
	getShow()
	//分享进来的用户
	if(options.from == 'invite'){
		let userId = uni.getStorageSync('userId')
		console.log('invite:'+options)
		console.log(options.oldId)
		if(options.oldId){
			uni.setStorageSync('recommendId',options.oldId)
		}
		if(!userId){
			uni.navigateTo({
				url: `/pages/login/login?from=${options.from}&oldId=${options.oldId}`
			})
		}else{

		}
	}
})

onPullDownRefresh(()=> {
	getBanner()
	getTel()
	getRecommend()
	getRoomList()
	// getGuessList()
	showContact.value = true
	setTimeout(()=> {
		uni.stopPullDownRefresh();
	}, 1000);
})

onPageScroll((e)=>{
	scrollTop.value = e.scrollTop
})
const getShow = async () => {
	// #ifdef APP-PLUS
		// 获取本地应用资源版本号
		plus.runtime.getProperty(plus.runtime.appid, (info) => {
			let version = info.version;
			console.log(version)
			if(version){
				showHome(version).then((res)=>{
					showHomeConfig.value = res
				})
			}
		})
	// #endif
}

const getBanner = async()=> {
	let res = await indexConfig(1,{})
	bannerList.value = res.items
}
const getTel = async()=> {
	onlineInfo.value = await indexConfig(2,{})
}
const goTq = async()=>{
	uni.navigateTo({
		url:'/pages/searchRoom/commutingSearch'
	})
}
const getRecommend = async()=> {
	let res = await indexConfig(3,{})
	navList.value = res.items.map(item=>{
		return {
			...item,
			openType: (item.page.includes('mapSearch')||item.page.includes('message/index')||item.page.includes('personal/index'))?'reLaunch':'navigate'
		}
	})
}

// 当前位置
const getRoomList = async()=> {
	let data = {
		lat: uni.getStorageSync('positionLat'),
		lon: uni.getStorageSync('positionLon'),
		apartmentId: ''
	}
	let res = await indexConfig(4,data)
	roomsList.value = res.items
}
const getGuessList = async()=> {
	let res = await getroomsList({
		pageNo: 1,
		pageSize: 10,
		isConcentrated: true
	})
	guessList.value = res.list.map(item=>{
		item.picUrl = item.picUrl?item.picUrl.split(',')[0]:''
		return item
	})
	console.log(res)
}
const goMessage = ()=> {
	uni.switchTab({
		url: '/pages/message/index'
	})
}
const goDetail = (id)=> {
	uni.navigateTo({
		url: `/pages/searchRoom/roomDetail?roomId=${id}`
	})
}
const handleSearch = ()=> {
	uni.navigateTo({
		// url: '/pages/searchRoom/index?search'
		url: '/pages/searchRoom/inputSearchRoom'
	})
}
// const showContact = uni.getStorageSync('showContact')!==''?uni.getStorageSync('showContact'):ref(true)
const closeContact = ()=>{
	showContact.value = false
	// uni.setStorageSync('showContact',false)
}

const goTo = (item)=>{
	if(item.openType=='reLaunch'){
		uni.reLaunch({
			url: item.page
		})
	}else{
		uni.navigateTo({
			url: item.page
		})
	}
}
</script>

<style lang="scss" scoped>
.container {
	width: 100%;
	min-height: 100vh;
	position: relative;
	overflow-y: scroll;
	justify-content: space-between;
	background: #F5F5F5;
	.searchBox {
		width: 100%;
		padding: 0 0 28rpx;
		position: absolute;
		bottom: 0;
		z-index: 9;
		.search {
			width: 608rpx;
			height: 80rpx;
			padding: 0 32rpx;
			background: #fff;
			border-radius: 8rpx;
			color: #fff;
			box-shadow: 0px 6px 12px 2px rgba(0,0,0,0.06);
			.uni-input {
				margin-left: 16rpx;
				font-size: 26rpx;
				flex: 1;
			}
		}

		.message {
			width: 48rpx;
			height: 48rpx;
			margin-left: 22rpx;
		}

		.message {
			width: 48rpx;
			height: 48rpx;
			margin-left: 22rpx;
		}
		.icon{
			width: 28rpx;
			height: 33rpx;
		}
	}
	.topBox {
		position: relative;
		padding-bottom: 68rpx;
		::v-deep.banner {
			height: 462rpx;
			overflow: hidden;
			.img {
				width: 100%;
				height: 462rpx;
			}
			.uni-swiper-dots {
				bottom: 55rpx;
			}
		}
	}
	.navBox {
		width: 686rpx;
		border-radius: 8rpx;
		padding: 28rpx 20rpx 0;
		margin: 0 auto;
		background: #FFFFFF;
		box-shadow: 0px 40rpx 80rpx 0px rgb(197, 197, 197, 0.1);
		.nav {
			flex: 0 0 25%;
			margin-bottom: 20rpx;
			.icon {
				width: 88rpx;
				height: 88rpx;
				margin: 0 auto;
				.img {
					height: 88rpx;
					width: 88rpx;
				}
			}

			.text {
				line-height: 40rpx;
				font-size: 26rpx;
				color: rgba(77, 77, 77, 1);
				text-align: center;
			}
		}

		::v-deep.u-scroll-list {
			padding-bottom: 20rpx;
			.u-scroll-list__scroll-view__content{
				flex-wrap: wrap;
			}
			.u-scroll-list__indicator {
				margin-top: 20rpx;
			}

			.u-scroll-list__indicator__line {
				height: 4rpx;
			}
		}
		&.twoLines{
			::v-deep.u-scroll-list {
				.u-scroll-list__scroll-view__content{
					flex-direction: column;
					height: 300rpx;
				}
			}
			.nav {
				width: 162rpx;
			}
		}
	}
	.tqBox{
		width: 686rpx;
		height: 132rpx;
		margin: 18rpx auto;
		background: url('#{$imgUrl}/icon/tqzf_bg.png') no-repeat center;
		background-size: 100% 100%;
		padding: 26rpx 32rpx;
		.tit{
			font-size: 32rpx;
			line-height: 42rpx;
			font-weight: 600;
		}
		.txt{
			color: #666;
			font-size: 24rpx;
		}
	}
	.introBox{
		display: flex;
		flex-wrap: wrap;
		background: #fff;
		border-radius: 8rpx;
		width: 686rpx;
		margin: 22rpx auto 24rpx;
		padding: 24rpx 26rpx 4rpx;
		.introList{
			width: 307rpx;
			height: 124rpx;
			border-radius: 20rpx;
			margin: 0 20rpx 20rpx 0;
			padding: 20rpx 16rpx;
			position: relative;
			overflow: hidden;
			&:nth-child(2n){
				margin-right: 0;
			}
			&.introList1{
				background: #E9F3FF;
			}
			&.introList2{
				background: #EBFDFF;
			}
			&.introList3{
				background: #EEEEFF;
			}
			&.introList4{
				background: #FFF4E4;
			}
			.pic{
				width: 136rpx;
				height: 136rpx;
				position: absolute;
				right: -14rpx;
				bottom: -20rpx;
			}
			.tit{
				font-size: 30rpx;
				line-height: 42rpx;
				margin-left: 4rpx;
			}
			.txt{
				font-size: 24rpx;
				color: #999;
				line-height: 34rpx;
				margin: 6rpx 0 0 4rpx;
			}
		}
	}
	.mainBox {
		position: relative;
		.onlineBox {
			width: 686rpx;
			padding: 18rpx 32rpx 18rpx 24rpx;
			background: linear-gradient(90deg, #fff 50%, #FFF7EB 100%);
			box-shadow: 0px 40px 80px 0px rgb(197, 197, 197, 0.3);
			margin: 32rpx auto;
			border-radius: 54rpx;
			position: relative;

			.logo {
				width: 76rpx;
				height: 76rpx;
			}

			.onlineIcon {
				width: 132rpx;
				height: 40rpx;
				position: absolute;
				top: -10rpx;
				right: 0;
			}

			.mess {
				flex: 1;
				margin: 0 18rpx;

				.time {
					font-weight: 400;
					color: #666;
					font-size: 22rpx;
					line-height: 32rpx;
				}

				.phone {
					font-size: 36rpx;
					color: #666;
					font-weight: 500;
					line-height: 44rpx;
				}
			}

			.btn,
			::v-deep.u-button {
				width: 128rpx;
				height: 48rpx;
				font-size: 24rpx;
				margin-top: 10rpx;
			}
		}

		.hotelBox {
			padding: 0 32rpx 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.list {
				width: 332rpx;
				height: 224rpx;
				border-radius: 12rpx;
				overflow: hidden;
				position: relative;

				.pic {
					width: 332rpx;
					height: 224rpx;
				}

				.mess {
					width: 332rpx;
					height: 224rpx;
					padding: 12rpx 12rpx 20rpx;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 2;
					color: #fff;

					.name {
						color: #fff;
						font-size: 28rpx;
						line-height: 42rpx;
					}

					.price {
						color: #fff;
						font-size: 26rpx;
						line-height: 36rpx;

						.fh {
							font-size: 24rpx;
							margin-right: 6rpx;
						}
					}

					.addr {
						color: #fff;
						line-height: 28rpx;
						font-size: 24rpx;
						margin: 10rpx 0 30rpx;
					}

					.icon {
						padding-right: 12rpx;
						justify-content: space-between;

						.icon-tj {
							width: 140rpx;
							height: 40rpx;
						}

						.icon-tel {
							width: 36rpx;
							height: 36rpx;
						}
					}
				}
			}
		}

		.loveBox {
			padding: 10rpx 32rpx 0;
			margin: 0 0 30rpx;
			.loveTit {
				font-size: 32rpx;
				line-height: 40rpx;
				margin-bottom: 20rpx;
				color: #000;
				font-weight: 600;
			}
			.loveBottom {
				background: #fff;
				padding: 28rpx 0 6rpx;
				.loveItem {
					flex: 0 0 288rpx;
					height: 304rpx;
					border-radius: 8rpx;
					overflow: hidden;
					margin-right: 20rpx;
					position: relative;
					&:last-child {
						margin: 0;
					}
					.loveImage {
						width: 288rpx;
						height: 304rpx;
					}
					.house{
						width: 272rpx;
						position: absolute;
						left: 8rpx;
						bottom: 8rpx;
						background: #fff;
						.mess{
							padding: 28rpx 24rpx 14rpx;
							position: relative;
							.name{
								color: #fff;
								background: $uni-color-primary;
								position: absolute;
								top: -18rpx;
								left: 28rpx;
								font-size: 20rpx;
								line-height: 36rpx;
								padding: 0 10rpx;
								border-radius: 4rpx;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								max-width: 220rpx;
							}
							.num{
								color: #4D4D4D;
								line-height: 40rpx;
							}
							.price{
								line-height: 28rpx;
								font-size: 24rpx;
								color: #999;
							}
						}
					}
				}
			}
		}
	}
	.mainTit{
		padding: 0 32rpx;
		font-size: 32rpx;
		line-height: 40rpx;
		margin-bottom: 20rpx;
		color: #000;
		font-weight: 600;
	}
	.contactUs{
		position: fixed;
		top: 640rpx;
		right: 0;
		z-index: 999;
		.close{
			text-align: right;
			line-height: 48rpx;
		}
		.img{
			width: 120rpx;
			height: 104rpx;
		}
	}
}
</style>
